<template>
  <div class="dashboard-container">
    <!-- 第一行：今日概况、昨日概况、快捷方式 -->
    <el-row :gutter="16" class="dashboard-row">
      <!-- 今日概况 -->
      <el-col :span="8">
        <el-card shadow="hover" class="overview-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">今日概况</span>
            </div>
          </template>
          <div class="overview-content">
            <div class="overview-item">
              <span class="label">单据数量</span>
              <span class="value">{{ todayStats.documentCount }}</span>
            </div>
            <div class="overview-item">
              <span class="label">入库数量</span>
              <span class="value">{{ todayStats.inboundQuantity }}</span>
            </div>
            <div class="overview-item">
              <span class="label">入库金额</span>
              <span class="value">¥{{ todayStats.inboundAmount.toFixed(2) }}</span>
            </div>
            <div class="overview-item">
              <span class="label">出库数量</span>
              <span class="value">{{ todayStats.outboundQuantity }}</span>
            </div>
            <div class="overview-item">
              <span class="label">出库金额</span>
              <span class="value">¥{{ todayStats.outboundAmount.toFixed(2) }}</span>
            </div>
            <div class="overview-actions">
              <el-button type="success" size="small" @click="goToCreateWarehousing">入库</el-button>
              <el-button type="warning" size="small" @click="goToOutbound">出库</el-button>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 昨日概况 -->
      <el-col :span="8">
        <el-card shadow="hover" class="overview-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">昨日概况</span>
            </div>
          </template>
          <div class="overview-content">
            <div class="overview-item">
              <span class="label">单据数量</span>
              <span class="value">{{ yesterdayStats.documentCount }}</span>
            </div>
            <div class="overview-item">
              <span class="label">入库数量</span>
              <span class="value">{{ yesterdayStats.inboundQuantity }}</span>
            </div>
            <div class="overview-item">
              <span class="label">入库金额</span>
              <span class="value">¥{{ yesterdayStats.inboundAmount.toFixed(2) }}</span>
            </div>
            <div class="overview-item">
              <span class="label">出库数量</span>
              <span class="value">{{ yesterdayStats.outboundQuantity }}</span>
            </div>
            <div class="overview-item">
              <span class="label">出库金额</span>
              <span class="value">¥{{ yesterdayStats.outboundAmount.toFixed(2) }}</span>
            </div>
            <div class="overview-actions">
              <el-button type="success" size="small" @click="goToCreateWarehousing">入库</el-button>
              <el-button type="warning" size="small" @click="goToOutbound">出库</el-button>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 快捷方式 -->
      <el-col :span="8">
        <el-card shadow="hover" class="quick-access-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">快捷方式</span>
            </div>
          </template>
          <div class="quick-access-grid">
            <div v-for="item in quickAccessItems" :key="item.name" class="quick-access-item"
              @click="handleQuickAccess(item.route)">
              <el-icon :size="24" class="quick-access-icon">
                <component :is="iconMap[item.iconName]" />
              </el-icon>
              <span class="quick-access-label">{{ item.name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第二行：库存占比、代办事项、预警信息 -->
    <el-row :gutter="16" class="dashboard-row">
      <!-- 库存数量占比 -->
      <el-col :span="8">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">库存数量占比</span>
            </div>
          </template>
          <div ref="quantityChartRef" class="chart-container"></div>
          <div class="chart-legend">
            <div v-for="item in inventoryQuantityData" :key="item.name" class="legend-item">
              <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
              <span class="legend-label">{{ item.name }}: {{ item.value }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 库存金额占比 -->
      <el-col :span="8">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">库存金额占比</span>
            </div>
          </template>
          <div ref="amountChartRef" class="chart-container"></div>
          <div class="chart-legend">
            <div v-for="item in inventoryAmountData" :key="item.name" class="legend-item">
              <span class="legend-color" :style="{ backgroundColor: item.color }"></span>
              <span class="legend-label">{{ item.name }}: ¥{{ item.value.toFixed(2) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 代办事项和预警信息 -->
      <el-col :span="8">
        <el-row :gutter="16">
          <!-- 代办事项 -->
          <el-col :span="24">
            <el-card shadow="hover" class="todo-card">
              <template #header>
                <div class="card-header">
                  <span class="card-title">代办事项</span>
                </div>
              </template>
              <div class="todo-content">
                <div class="todo-section">
                  <div class="todo-section-title">待审核</div>
                  <div class="todo-items">
                    <div class="todo-item" v-for="item in pendingApproval" :key="item.name">
                      <span class="todo-label">{{ item.name }}</span>
                      <el-badge :value="item.count" class="todo-badge" />
                    </div>
                  </div>
                </div>
                <div class="todo-section">
                  <div class="todo-section-title">待执行</div>
                  <div class="todo-items">
                    <div class="todo-item" v-for="item in pendingExecution" :key="item.name">
                      <span class="todo-label">{{ item.name }}</span>
                      <el-badge :value="item.count" class="todo-badge" />
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 预警信息 -->
          <el-col :span="24">
            <el-card shadow="hover" class="warning-card">
              <template #header>
                <div class="card-header">
                  <span class="card-title">预警信息</span>
                </div>
              </template>
              <div class="warning-content">
                <div class="warning-item" v-for="item in warnings" :key="item.type">
                  <el-icon :size="20" :color="item.color">
                    <component :is="warningIconMap[item.iconName]" />
                  </el-icon>
                  <span class="warning-label">{{ item.label }}</span>
                  <el-badge :value="item.count" class="warning-badge" />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 第三行：入库统计、出库统计、系统消息 -->
    <el-row :gutter="16" class="dashboard-row">
      <!-- 入库统计 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">入库统计</span>
              <div class="chart-filters">
                <el-button-group>
                  <el-button size="small" :type="statisticsPeriod === 7 ? 'primary' : ''"
                    @click="statisticsPeriod = 7">最近7天</el-button>
                  <el-button size="small" :type="statisticsPeriod === 30 ? 'primary' : ''"
                    @click="statisticsPeriod = 30">最近30天</el-button>
                  <el-button size="small" :type="statisticsPeriod === 365 ? 'primary' : ''"
                    @click="statisticsPeriod = 365">最近一年</el-button>
                </el-button-group>
              </div>
            </div>
          </template>
          <div ref="inboundChartRef" class="chart-container-large"></div>
        </el-card>
      </el-col>

      <!-- 出库统计 -->
      <el-col :span="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">出库统计</span>
              <div class="chart-filters">
                <el-button-group>
                  <el-button size="small" :type="statisticsPeriod === 7 ? 'primary' : ''"
                    @click="statisticsPeriod = 7">最近7天</el-button>
                  <el-button size="small" :type="statisticsPeriod === 30 ? 'primary' : ''"
                    @click="statisticsPeriod = 30">最近30天</el-button>
                  <el-button size="small" :type="statisticsPeriod === 365 ? 'primary' : ''"
                    @click="statisticsPeriod = 365">最近一年</el-button>
                </el-button-group>
              </div>
            </div>
          </template>
          <div ref="outboundChartRef" class="chart-container-large"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 第四行：入库排名、出库排名、系统消息 -->
    <el-row :gutter="16" class="dashboard-row">
      <!-- 入库排名 -->
      <el-col :span="6">
        <el-card shadow="hover" class="ranking-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">入库排名</span>
            </div>
          </template>
          <el-table :data="inboundRanking" size="small" stripe max-height="280">
            <el-table-column prop="rank" label="排名" width="60" align="center" />
            <el-table-column prop="productName" label="货品名称" min-width="100" show-overflow-tooltip />
            <el-table-column prop="quantity" label="数量" width="80" align="right" />
            <el-table-column prop="amount" label="金额" width="100" align="right">
              <template #default="{ row }">¥{{ row.amount.toFixed(2) }}</template>
            </el-table-column>
            <el-table-column prop="count" label="入库次数" width="90" align="center" />
          </el-table>
        </el-card>
      </el-col>

      <!-- 出库排名 -->
      <el-col :span="6">
        <el-card shadow="hover" class="ranking-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">出库排名</span>
            </div>
          </template>
          <el-table :data="outboundRanking" size="small" stripe max-height="280">
            <el-table-column prop="rank" label="排名" width="60" align="center" />
            <el-table-column prop="productName" label="货品名称" min-width="100" show-overflow-tooltip />
            <el-table-column prop="quantity" label="数量" width="80" align="right" />
            <el-table-column prop="amount" label="金额" width="100" align="right">
              <template #default="{ row }">¥{{ row.amount.toFixed(2) }}</template>
            </el-table-column>
            <el-table-column prop="count" label="出库次数" width="90" align="center" />
          </el-table>
        </el-card>
      </el-col>

      <!-- 系统消息 -->
      <el-col :span="12">
        <el-card shadow="hover" class="message-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">系统消息</span>
              <el-link type="primary" @click="goToMessages">更多</el-link>
            </div>
          </template>
          <div class="message-content">
            <div v-for="(message, index) in systemMessages" :key="index" class="message-item">
              <div class="message-time">{{ message.time }}</div>
              <div class="message-text">{{ message.content }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import myaxios from '@/http/MyAxios'
import { ElMessage } from 'element-plus'
import {
  Box, User, ShoppingCart, ShoppingBag, Files, DocumentAdd, List,
  TrendCharts, Warning, CircleClose, Clock, ArrowUp, ArrowDown
} from '@element-plus/icons-vue'

const router = useRouter()

// 图标映射
const iconMap: Record<string, any> = {
  Box,
  ShoppingCart,
  List,
  TrendCharts,
  ShoppingBag,
  DocumentAdd,
  CircleClose,
  Files,
  User
}

// 快捷方式配置
const quickAccessItems = [
  { name: '入库管理', iconName: 'Box', route: 'GetWarehousing' },
  { name: '出库管理', iconName: 'ShoppingCart', route: 'GetOutbound' },
  { name: '库存盘点', iconName: 'List', route: 'GetInventory' },
  { name: '库存调拨', iconName: 'TrendCharts', route: 'GetTransfer' },
  { name: '货品信息', iconName: 'ShoppingBag', route: 'GetProdut' },
  { name: '进货订单', iconName: 'DocumentAdd', route: 'GetStockingGoods' },
  { name: '进货退货', iconName: 'CircleClose', route: 'GetPurchaseReturn' },
  { name: '销售订单', iconName: 'Files', route: 'GetSalesOrder' },
  { name: '销售退货', iconName: 'CircleClose', route: 'GetSalesReturn' },
  { name: '供应商管理', iconName: 'User', route: 'GetSupplier' },
  { name: '客户管理', iconName: 'User', route: 'GetCustomer' },
  { name: '仓库管理', iconName: 'Box', route: 'GetWarehouse' }
]

// 统计数据
const todayStats = reactive({
  documentCount: 52,
  inboundQuantity: 602,
  inboundAmount: 2000.00,
  outboundQuantity: 602,
  outboundAmount: 2000.00
})

const yesterdayStats = reactive({
  documentCount: 52,
  inboundQuantity: 602,
  inboundAmount: 2000.00,
  outboundQuantity: 602,
  outboundAmount: 2000.00
})

// 库存占比数据
const inventoryQuantityData = ref([
  { name: '仓库一', value: 567, color: '#5470c6' },
  { name: '仓库二', value: 678, color: '#91cc75' },
  { name: '仓库三', value: 789, color: '#fac858' },
  { name: '仓库四', value: 890, color: '#ee6666' },
  { name: '仓库五', value: 991, color: '#73c0de' },
  { name: '仓库六', value: 234, color: '#3ba272' },
  { name: '仓库七', value: 1086, color: '#fc8452' }
])

const inventoryAmountData = ref([
  { name: '仓库一', value: 539.00, color: '#5470c6' },
  { name: '仓库二', value: 920.00, color: '#91cc75' },
  { name: '仓库三', value: 1234.00, color: '#fac858' },
  { name: '仓库四', value: 1456.00, color: '#ee6666' },
  { name: '仓库五', value: 1678.00, color: '#73c0de' },
  { name: '仓库六', value: 890.00, color: '#3ba272' },
  { name: '仓库七', value: 2018.00, color: '#fc8452' }
])

// 代办事项
const pendingApproval = ref([
  { name: '入库单据', count: 2 },
  { name: '出库单据', count: 3 },
  { name: '调拨单据', count: 5 },
  { name: '进货单据', count: 5 },
  { name: '销售单据', count: 2 },
  { name: '进货退货', count: 3 },
  { name: '销售退货', count: 4 }
])

const pendingExecution = ref([
  { name: '待入库', count: 2 },
  { name: '待出库', count: 3 }
])

// 预警信息
const warningIconMap: Record<string, any> = {
  ArrowUp,
  ArrowDown,
  Clock,
  Warning
}

const warnings = ref([
  { type: 'upper', label: '库存高于上限', count: 2, color: '#67c23a', iconName: 'ArrowUp' },
  { type: 'lower', label: '库存低于下限', count: 2, color: '#f56c6c', iconName: 'ArrowDown' },
  { type: 'expiring', label: '临期货品', count: 2, color: '#e6a23c', iconName: 'Clock' },
  { type: 'expired', label: '到期货品', count: 2, color: '#f56c6c', iconName: 'Warning' }
])

// 统计图表周期
const statisticsPeriod = ref(7)

// 图表引用
const quantityChartRef = ref<HTMLDivElement>()
const amountChartRef = ref<HTMLDivElement>()
const inboundChartRef = ref<HTMLDivElement>()
const outboundChartRef = ref<HTMLDivElement>()

let quantityChart: echarts.ECharts | null = null
let amountChart: echarts.ECharts | null = null
let inboundChart: echarts.ECharts | null = null
let outboundChart: echarts.ECharts | null = null

// 入库排名
const inboundRanking = ref([
  { rank: 1, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 2, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 3, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 4, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 5, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 6, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 7, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 8, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 9, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 10, productName: '货品一', quantity: 50, amount: 200.00, count: 6 }
])

// 出库排名
const outboundRanking = ref([
  { rank: 1, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 2, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 3, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 4, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 5, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 6, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 7, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 8, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 9, productName: '货品一', quantity: 50, amount: 200.00, count: 6 },
  { rank: 10, productName: '货品一', quantity: 50, amount: 200.00, count: 6 }
])

// 系统消息
const systemMessages = ref([
  { time: '2025-11-20 10:05:03', content: '您有新的销售订单需要审核' },
  { time: '2025-11-20 10:05:03', content: '你有新的入库任务需要执行' },
  { time: '2025-11-20 10:05:03', content: '你有新的出库任务需要执行' },
  { time: '2025-11-20 10:05:03', content: '您有新的进货订单需要审核' },
  { time: '2025-11-20 10:05:03', content: '您有新的调拨单据需要审核' }
])

// 初始化图表
const initCharts = async () => {
  await nextTick()

  // 库存数量占比饼图
  if (quantityChartRef.value) {
    quantityChart = echarts.init(quantityChartRef.value)
    const totalQuantity = inventoryQuantityData.value.reduce((sum, item) => sum + item.value, 0)
    quantityChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'
      },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: inventoryQuantityData.value,
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }],
      graphic: [{
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `${totalQuantity}\n总库存`,
          textAlign: 'center',
          fill: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      }]
    })
  }

  // 库存金额占比饼图
  if (amountChartRef.value) {
    amountChart = echarts.init(amountChartRef.value)
    const totalAmount = inventoryAmountData.value.reduce((sum, item) => sum + item.value, 0)
    amountChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{b}: ¥{c} ({d}%)'
      },
      series: [{
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        data: inventoryAmountData.value,
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }],
      graphic: [{
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `¥${totalAmount.toFixed(2)}\n总金额`,
          textAlign: 'center',
          fill: '#333',
          fontSize: 16,
          fontWeight: 'bold'
        }
      }]
    })
  }

  // 入库统计图表
  if (inboundChartRef.value) {
    inboundChart = echarts.init(inboundChartRef.value)
    const dates = []
    const quantities = []
    const amounts = []

    for (let i = 6; i >= 0; i--) {
      const date = new Date()
      date.setDate(date.getDate() - i)
      dates.push(date.toISOString().split('T')[0])
      quantities.push(Math.floor(Math.random() * 150) + 50)
      amounts.push(Math.floor(Math.random() * 1000) + 200)
    }

    inboundChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {
        data: ['数量', '金额']
      },
      xAxis: {
        type: 'category',
        data: dates
      },
      yAxis: [
        {
          type: 'value',
          name: '数量',
          position: 'left'
        },
        {
          type: 'value',
          name: '金额',
          position: 'right'
        }
      ],
      series: [
        {
          name: '数量',
          type: 'bar',
          data: quantities,
          itemStyle: { color: '#5470c6' }
        },
        {
          name: '金额',
          type: 'line',
          yAxisIndex: 1,
          data: amounts,
          itemStyle: { color: '#91cc75' }
        }
      ]
    })
  }

  // 出库统计图表
  if (outboundChartRef.value) {
    outboundChart = echarts.init(outboundChartRef.value)
    const dates = []
    const quantities = []
    const amounts = []

    for (let i = 6; i >= 0; i--) {
      const date = new Date()
      date.setDate(date.getDate() - i)
      dates.push(date.toISOString().split('T')[0])
      quantities.push(Math.floor(Math.random() * 150) + 50)
      amounts.push(Math.floor(Math.random() * 1000) + 200)
    }

    outboundChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' }
      },
      legend: {
        data: ['数量', '金额']
      },
      xAxis: {
        type: 'category',
        data: dates
      },
      yAxis: [
        {
          type: 'value',
          name: '数量',
          position: 'left'
        },
        {
          type: 'value',
          name: '金额',
          position: 'right'
        }
      ],
      series: [
        {
          name: '数量',
          type: 'bar',
          data: quantities,
          itemStyle: { color: '#fac858' }
        },
        {
          name: '金额',
          type: 'line',
          yAxisIndex: 1,
          data: amounts,
          itemStyle: { color: '#91cc75' }
        }
      ]
    })
  }
}

// 监听统计周期变化
watch(statisticsPeriod, () => {
  // 重新加载统计数据
  loadStatisticsData()
})

// 加载统计数据
const loadStatisticsData = async () => {
  // TODO: 调用实际API获取统计数据
  // 这里可以调用后端API来获取真实的统计数据
}

// 快捷方式跳转
const handleQuickAccess = (route: string) => {
  try {
    router.push({ name: route })
  } catch (error) {
    ElMessage.warning('该功能正在开发中')
  }
}

const goToCreateWarehousing = () => {
  router.push({ name: 'CreateWarehousing' })
}

const goToOutbound = () => {
  router.push({ name: 'GetOutbound' })
}

const goToMessages = () => {
  router.push({ name: 'GetInformation' })
}

// 加载仪表板数据
const loadDashboardData = async () => {
  try {
    // TODO: 调用后端API获取仪表板数据
    // 这里可以添加实际的API调用来获取统计数据
  } catch (error) {
    console.error('加载仪表板数据失败:', error)
  }
}

onMounted(async () => {
  await loadDashboardData()
  await initCharts()

  // 监听窗口大小变化，自适应图表
  window.addEventListener('resize', () => {
    quantityChart?.resize()
    amountChart?.resize()
    inboundChart?.resize()
    outboundChart?.resize()
  })
})
</script>

<style scoped>
.dashboard-container {
  padding: 12px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
}

.dashboard-row {
  margin-bottom: 12px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
}

/* 优化卡片内容区域padding */
:deep(.el-card__body) {
  padding: 12px;
}

:deep(.el-card__header) {
  padding: 12px 16px;
}

/* 概况卡片 */
.overview-card {
  height: 100%;
}

.overview-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.overview-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

.overview-item:last-child {
  border-bottom: none;
}

.overview-item .label {
  color: #606266;
  font-size: 14px;
}

.overview-item .value {
  color: #303133;
  font-size: 16px;
  font-weight: 600;
}

.overview-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  justify-content: center;
}

/* 快捷方式卡片 */
.quick-access-card {
  height: 100%;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.quick-access-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.quick-access-item:hover {
  border-color: #409eff;
  background-color: #ecf5ff;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.quick-access-icon {
  margin-bottom: 4px;
  color: #409eff;
}

.quick-access-label {
  font-size: 11px;
  color: #606266;
  text-align: center;
  line-height: 1.2;
}

/* 图表卡片 */
.chart-card {
  height: 100%;
}

.chart-container {
  height: 220px;
}

.chart-container-large {
  height: 280px;
}

.chart-legend {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-label {
  color: #606266;
}

.chart-filters {
  display: flex;
  gap: 8px;
}

/* 代办事项卡片 */
.todo-card {
  height: 100%;
  margin-bottom: 12px;
}

.todo-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.todo-section-title {
  font-size: 13px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 6px;
}

.todo-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
}

.todo-label {
  font-size: 12px;
  color: #606266;
}

/* 预警信息卡片 */
.warning-card {
  height: 100%;
}

.warning-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.warning-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}

.warning-label {
  flex: 1;
  font-size: 12px;
  color: #606266;
}

/* 排名卡片 */
.ranking-card {
  height: 100%;
}

/* 消息卡片 */
.message-card {
  height: 100%;
}

.message-content {
  max-height: 280px;
  overflow-y: auto;
}

.message-item {
  padding: 6px 0;
  border-bottom: 1px solid #f0f0f0;
}

.message-item:last-child {
  border-bottom: none;
}

.message-time {
  font-size: 11px;
  color: #909399;
  margin-bottom: 2px;
}

.message-text {
  font-size: 12px;
  color: #606266;
}
</style>
